<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="all">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="Copyright" content="TENCNET">
  <meta name="author" content="Tencent-TGideas">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>leaflet地图图层切换</title>
  <link href="https://cdn.bootcss.com/leaflet/1.5.1/leaflet.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/leaflet/1.5.1/leaflet.js"></script>
  <style>
    html, body {
      padding: 0px;
      margin: 0px;
    }
  </style>
</head>
<body>
<div id="map" style="height: 100vh;width:100%"></div>
<script>
    L.TileLayer.ChinaProvider = L.TileLayer.extend({
        initialize: function (type, options) {
            var providers = L.TileLayer.ChinaProvider.providers;
            var parts = type.split('.');
            var providerName = parts[0];
            var mapName = parts[1];
            var mapType = parts[2];
            var url = providers[providerName][mapName][mapType];
            options.subdomains = providers[providerName].Subdomains;
            L.TileLayer.prototype.initialize.call(this, url, options);
        }
    });
    L.TileLayer.ChinaProvider.providers = {
        GaoDe: {
            Normal: {
                Map: 'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
            },
            Satellite: {
                Map: 'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                Annotion: 'http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
            },
            Subdomains: ["1", "2", "3", "4"]
        },
        Google: {
            Normal: {
                Map: "http://www.google.cn/maps/vt?lyrs=m@900&gl=cn&x={x}&y={y}&z={z}"
            },
            Terrain: {
                Map: "http://mt0.google.cn/vt/lyrs=t@132,r@292000000&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&scale=2&s=Gal",
                Annotion: "http://www.google.cn/maps/vt?lyrs=h@900&gl=cn&x={x}&y={y}&z={z}&scale=2&s="
            },
            Satellite: {
                Map: "http://www.google.cn/maps/vt?lyrs=s@900&gl=cn&x={x}&y={y}&z={z}",
                Annotion: "http://www.google.cn/maps/vt?lyrs=h@900&gl=cn&x={x}&y={y}&z={z}&scale=2&s="
            },
            Subdomains: []
        },
        Arcgis: {
            Normal: {
                Map: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}",
                Color: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetColor/MapServer/tile/{z}/{y}/{x}",
                PurplishBlue: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                Gray: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}",
                Warm: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetWarm/MapServer/tile/{z}/{y}/{x}",
                Cold: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetCold/MapServer/tile/{z}/{y}/{x}"
            },
            Satellite: {
                Map: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
                Annotion: "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}"
            },
            Subdomains: []
        },
        Open: {
            Normal: {
                Map: "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
            },
            Subdomains: []
        }
    };
    L.tileLayer.chinaProvider = function (type, options) {
        return new L.TileLayer.ChinaProvider(type, options);
    };
</script>
<script>
    var GoogleNormalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
          maxZoom: 23,
          minZoom: 0
      }),
      GoogleTerrainMap = L.tileLayer.chinaProvider('Google.Terrain.Map', {
          maxZoom: 23,
          minZoom: 0
      }),
      GoogleTerrainAnnotion = L.tileLayer.chinaProvider('Google.Terrain.Annotion', {
          maxZoom: 23,
          minZoom: 0
      }),
      GoogleSatelliteMap = L.tileLayer.chinaProvider('Google.Satellite.Map', {
          maxZoom: 23,
          minZoom: 0
      }),
      GoogleSatelliteAnnotion = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
          maxZoom: 23,
          minZoom: 0
      });
    var GaoDeNormalMap = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
          maxZoom: 18,
          minZoom: 3
      }),
      GaoDeSatelliteMap = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
          maxZoom: 18,
          minZoom: 0
      }),
      GaoDeSatelliteAnnotion = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 0
      });
    var ArcgisNormalMap = L.tileLayer.chinaProvider('Arcgis.Normal.Map', {
          maxZoom: 18,
          minZoom: 0
      }),
      ArcgisSatelliteMap = L.tileLayer.chinaProvider('Arcgis.Satellite.Map', {
          maxZoom: 18,
          minZoom: 0
      }),
      ArcgisSatelliteAnnotion = L.tileLayer.chinaProvider('Arcgis.Satellite.Annotion', {
          maxZoom: 18,
          minZoom: 0
      });
    var OpenNormalMap = L.tileLayer.chinaProvider('Open.Normal.Map', {
        maxZoom: 23,
        minZoom: 0,
        id: 'mapbox.streets'
    });
    var imgLayer = L.imageOverlay("http://tp5.com/static/images/map.png", new L.LatLngBounds(
      new L.LatLng(34.33333, 108.99999),
      new L.LatLng(34.102025, 108.66666)
    ), {});
    var google_streets = L.layerGroup([GoogleNormalMap]),
      google_terrain = L.layerGroup([GoogleTerrainMap, GoogleTerrainAnnotion]),
      google_satellite = L.layerGroup([GoogleSatelliteMap]),
      google_hybrid = L.layerGroup([GoogleSatelliteMap, GoogleSatelliteAnnotion]);
    var gaode_streets = L.layerGroup([GaoDeNormalMap]),
      gaode_satellite = L.layerGroup([GaoDeSatelliteMap]),
      gaode_hybrid = L.layerGroup([GaoDeSatelliteMap, GaoDeSatelliteAnnotion]);
    var arcgis_streets = L.layerGroup([ArcgisNormalMap]),
      arcgis_satellite = L.layerGroup([ArcgisSatelliteMap]),
      arcgis_hybrid = L.layerGroup([ArcgisSatelliteMap, ArcgisSatelliteAnnotion]);
    var open_streets = L.layerGroup([OpenNormalMap,imgLayer]);
    var baseLayers = {
        "谷歌地图(街道)": google_streets,
        "谷歌地图(地形)": google_terrain,
        "谷歌地图(卫星)": google_satellite,
        "谷歌地图(混合)": google_hybrid,
        "高德地图(街道)": gaode_streets,
        "高德地图(卫星)": gaode_satellite,
        "高德地图(混合)": gaode_hybrid,
        "Arcgis(街道)": arcgis_streets,
        "Arcgis(卫星)": arcgis_satellite,
        "Arcgis(混合)": arcgis_hybrid,
        "OpenMap(街道)": open_streets
    };
    var overlayLayers = {};
    var map = L.map("map", {
        center: [34.143378, 108.961412],
        zoom: 11,
        layers: [google_hybrid],
        zoomControl: true,
        worldCopyJump: true,
        zoomSnap: 0.5,
        zoomDelta: 0.5,
        wheelPxPerZoomLevel: 120
    });
    imgLayer.addTo(map);
    L.control.layers(baseLayers).addTo(map);
</script>
</body>
</html>